<template>
  <div class="app-container">
    <div style="margin: 20px 0">

      <div class="flex justify-content-space-between" style="gap: 20px">
        <el-card class="flex-auto padding-20">
          <div class="flex justify-content-space-between align-center">
            <div class="title">公共信用综合评价等级</div>
            <el-button plain type="primary">定性指标</el-button>
          </div>

          <!--  两列图表 -->
          <el-row :gutter="20">
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="padding-20 item_card" >
                <div class="flex">
                  <img alt="" src="@/assets/static/指标基本信息.png"  class="icon">
                  <div class="item_title">指标基本信息</div>
                </div>
                <div class="desc">指标属性：定性指标</div>
                <div  class="desc">计量单位：无</div>
              </div>
            </el-col>

            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="padding-20 item_card">
                <div class="flex">
                  <img alt="" src="@/assets/static/指标定义.png"  class="icon">
                  <div class="item_title">指标定义</div>
                </div>
                <div  class="desc">公共信用综合评价依托全国信用信息共享平台归集的公共信用信息，通过科学的评价体系，对市场主体公共信用综合水平进行评价。</div>
              </div>
            </el-col>

            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="padding-20 item_card">
                <div class="flex">
                  <img alt="" src="@/assets/static/计算方法.png"  class="icon">
                  <div class="item_title">计算方法</div>
                </div>
                <div  class="desc">按照公共信用综合评价规范进行评价。</div>
              </div>
            </el-col>

            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="  padding-20 item_card">
                <div class="flex">
                  <img alt="" src="@/assets/static/指标基本信息.png"  class="icon">
                  <div class="item_title">指标说明</div>
                </div>
                <div  class="desc">仅供各省级卫生健康委内部参考使用。</div>
              </div>
            </el-col>


            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="padding-20 item_card">
                <div class="flex">
                  <img alt="" src="@/assets/static/指标意义.png"  class="icon">
                  <div class="item_title">指标意义</div>
                </div>
                <div  class="desc">推动医院重视信用建设，进一步增强诚信意识。</div>
              </div>
            </el-col>

            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="padding-20  item_card">
                <div class="flex">
                  <img alt="" src="@/assets/static/数据来源.png"  class="icon">
                  <div class="item_title">数据来源</div>
                </div>
                <div  class="desc">指标来源：国家发展改革委</div>
                <div  class="desc">指标解释：国家公共信用信息中心</div>
              </div>
            </el-col>


          </el-row>


        </el-card>
      </div>











      <div class="flex justify-content-space-between" style="gap: 20px;margin-top: 20px;">
        <el-card class="flex-auto padding-20">
          <div class="flex justify-content-space-between align-center">
            <div class="title">评价等级统计</div>
            <el-button type="primary" icon="Download" >导出数据</el-button>
          </div>
          <div class="charts-common">
            <EchartsComponent  style="margin-left: 10px"  :options="chartOptions[0]" class="charts-common flex-auto"></EchartsComponent>
          </div>

        </el-card>
      </div>

    </div>


  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const cardList = ref([
  {
    title: '医疗收入增幅',
    count: 2847,
    num: "2179904",
    analyze: '2.8 %',
    status: 'increase'
  }, {
    title: '门诊次均费用增幅',
    count: 1500,
    num: "2179904",
    analyze: '2.8 %',
    status: 'decrease'
  }, {
    title: '门诊次均药品费用增幅',
    count: 1500,
    num: "2179904",
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '住院次均费用增幅',
    count: 1200,
    num: "2179904",
    analyze: '2.8 %',
    status: 'decrease'
  }
]);
const chartOptions = ref([
  {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      orient: 'horizontal', // 图例垂直排列
      left: 'center', // 图例放置在右侧
      top: 'top', // 图例垂直居中
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '医疗机构数量',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  },
]);
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .item_card{
     background-color: rgba(237, 241, 243, 0.66);
     border-radius: 13px;
     height: 140px;
  }
  .title {
    color: #464646;
    font-size: 18px;
    font-weight: 600;
  }

  .icon {
    width: 21px;
    height: 22px;
  }
  .desc{
    font-size: 16px;
    color: #464646;
    font-weight: 400;
    padding-top: 10px;
  }
  .item_title{
     color: black;
     font-weight: bolder;
     margin-left: 10px;
  }

  .charts-common {
    height: 300px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
